<script setup>
import { ref } from 'vue'
import { resetPwdAPI } from '@/apis/user'
import { useRouter } from 'vue-router'

const pwdObj = ref({
    password: '',
    newPassword: '',
    type: 0
})

const check = () => {
    if (pwdObj.value.password === '' || pwdObj.value.newPassword === '') {
        ElMessage({ type: 'warning', message: '输入不能为空' })
        return false
    } else if (pwdObj.value.newPassword !== pwdObj.value.password) {
        ElMessage({ type: 'warning', message: '两次输入的密码不一致' })
        return false
    } else {
        return true
    }
}

const router = useRouter()
const resetPwd = async () => {
    if (check()) {
        const res = await resetPwdAPI({ ...pwdObj.value })
        if (res.code === 2000) {
            ElMessage({ type: 'success', message: '密码已重置' })
            router.replace({ path: '/login' })
        }
    }
}
</script>

<template>
<div id="container">
    <div class="reset-title">
        <div class="logo">
            <img src="@/assets/img/logo.png">
            <span class="title-1">融销通</span>
            <span class="title-2">农场品融销一体平台</span>
        </div>
    </div>
    <div class="reset-password-container">
        <div class="reset-content">
            <div class="left">
                <div class="password">请输入新的登录密码</div>
                <div class="repassword">请再次输入新的登录密码</div>
            </div>
            <div class="right">
                <div class="phone-text">
                    <input type="password" class="input-phone" v-model="pwdObj.password">
                </div>
                <div class="repassword-text">
                    <input type="password" class="input-phone" v-model="pwdObj.newPassword">
                </div>
                <div class="next-button">
                    <a href="javascript:;" @click="resetPwd">确认</a>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
#container {    
    background-color: #F5F5F5;
    height: 910px;
}
.reset-title {
    height: 120px;
    background-color: #fff;
    border-bottom: 2px solid rgb(49,190,62);
}
.logo {
    padding-top: 15px;
    /* padding-left: 403px; */
    padding-left: 23.6%;
}
.logo img {
    width: 100px;
    height: 90px;
}
.logo .title-1{
    color: #269c2a;
    display: inline-block;
    font-size: 20px;
    transform: translate(5px, -10px);
}
.logo .title-2{
    display: inline-block;
    transform: translate(-55px, 20px);
    font-size: 13px;

}
.reset-password-container {
    width: 800px;
    height: 700px;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    border-radius: 5px;
}
.reset-content {
    margin: 0 auto 30px;
    height: 90%;
    padding-top: 180px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}
.phone {
    user-select: none;
    margin-top: 5px;
}
.password {
    user-select: none;
    margin-top: 6px;
    float: right;
}
.captcha {
    margin-top: 50px;
    user-select: none;
    float: right;
}
.repassword {
    margin-top: 76px;
    user-select: none;
}
.right input {
    border: 1px solid #ddd;
    border-radius: 5px;
    line-height: 34px;
    padding: 0 10px;
    outline: none;
}
.phone-text {
    margin-left: 50px;
    width: 260px;
}
.phone-text input {
    width: 260px;
}
.captcha-text {
    margin-top: 35px;
    margin-left: 50px;
}
.repassword-text input{
    margin-top: 35px;
    margin-left: 50px;
    width: 260px;
}
.next-button {
    cursor: pointer;
    margin-top: 50px;
}
.send {
    font-size: 14px;
    color: #39bf3e;
    margin-left: 20px;
}
.next-button {
    margin-top: 60px;
    margin-left: 45px;
    background: #45b035;
    width: 180px;
    text-align: center;
    line-height: 34px;
    border-radius: 4px;
    >a {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 16px;
        color: #fff;
    }
}
.next-button1 {
    margin-top: 60px;
    background: #45b035;
    width: 180px;
    text-align: center;
    line-height: 34px;
    border-radius: 4px;
    font-size: 16px;
    color: #fff;
}
</style>
